import React,{useState} from 'react'

function TabList() {
    const [lists, setLists] = useState(0);
    const [listx, setListx] = useState(0);
    const [listy, setListy] = useState(0);
    const list = ['全部', '电商', '微信/公众号', '社群发圈', '生活娱乐', '小红书', '短视频平台', '线下印刷', '线下电商'];
    const list2 = ['全部', '海报', '公众号首图', '文章长图', '小红书配图', '小红书封面', '全屏海报', '电商竖版海报', '商品主图', '公众号次图', '详情页', '更多v']
    const list3 = ['全部', '通用', '教育培训', '金融保险', '商品零售', '企业行政', '美容美妆', '食品生鲜', '服饰箱包', '政务媒体', '生活服务', '母婴亲子', '更多v']
    return (
        <div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>渠道</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list.map((item, index) => {
                  return <li key={index}
                    onClick={() => setLists(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: lists === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>物料</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list2.map((item, index) => {
                  return <li key={index}
                    onClick={() => setListx(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: listx === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              marginBottom: '10px'
            }}>
              <div>行业</div>
              <ul style={{
                listStyleType: 'none',
                padding: 0,
                display: 'flex',
                flexWrap: 'wrap',
                marginLeft: '10px'
              }}>
                {list3.map((item, index) => {
                  return <li key={index}
                    onClick={() => setListy(index)}
                    style={{
                      padding: '5px 10px',
                      cursor: 'pointer',
                      marginRight: '5px',
                      marginBottom: '5px',
                      backgroundColor: listy === index ? '#ddd' : 'transparent',
                    }}>{item}</li>
                })

                }
              </ul>
            </div>
        </div>
    )
}

export default TabList
